<template>
	<view>
		<navbar title="选择客户" :autoBack="true"></navbar>
		<view class="con">
			<view class="header">
				<!-- 搜索 -->
				<u-search placeholder="搜索" color='#333' searchIconSize='50rpx' :showAction="false" bgColor='#ffffff'
					height='90rpx' placeholderColor='#8D8D8D' v-model="keyword" @change='getuserlist'></u-search>
			</view>
			<view class="box">
				<view class="box__a">
					<view class="box__top" v-for="(item,index) in tlist" :key="index">
						<view class="box__top__text">
							{{item.name}}
						</view>
						<image src="/static/report/more.png" class="box__top__m" mode=""></image>
					</view>
					<view class="box__title">
						<view class="box__title__line">

						</view>
						<view class="" style="flex: 1;">
							我的客户
						</view>
						<u-button color="#3262FD" @click="navto('/pages/customer/information')"
							:customStyle='{width:"130rpx",height:"50rpx",margin:"0",padding:0,borderRadius:"5rpx",fontSize:"24rpx"}'>新建客户</u-button>
					</view>
					<scroll-view scroll-y="true" class="scbox2">
						<view class="box__item" v-for="(item,index) in userlist" :key="index"
							@click="curuser=index,userinfo=userlist[index]">
							<view class="box__item__chbox">
								<image src="/static/tool/yx.png" class="box__item__checkicon" mode=""
									v-if="curuser==index"></image>
								<view class="box__item__check" v-else>

								</view>
							</view>
							<image :src="URL(item.avatar)" class="box__item__tx" mode="aspectFill"></image>
							<view class="">
								<view class="box__item__name">
									{{item.username}}
								</view>
								<view class="box__item__addr">
									{{item.mobile}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="footer">
				<view class="u-flex u-flex-y-center" style="flex: 1;">
					<image :src="URL(userinfo.avatar)" v-if="userinfo.avatar" class="footer__tx" mode="aspectFill">
					</image>
					<view class="footer__name" v-if="userinfo.username">
						{{userinfo.username}}
					</view>
				</view>

				<u-button color="#3262FD" @click="submit"
					:customStyle='{width:"165rpx",height:"94rpx",margin:"0",padding:0,borderRadius:"15rpx",fontSize:"32rpx"}'>确认</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import sale from '@/api/_sale.js'
	export default {
		data() {
			return {
				keyword: '',
				userinfo: {},
				tlist: [{
						name: '共享客户',
						url: ''
					},
					{
						name: '团队客户',
						url: ''
					},
				],
				userlist: [],
				curuser: null
			};
		},
		methods: {
			async getuserlist() {
				let res = await sale.customerList({keyword:this.keyword})
				if (res.data.code == 1) {
					this.userlist = res.data.data
					if (this.$store.state.curcustomer) {
						this.userlist.map((t, i) => {
							if (t.id == this.$store.state.curcustomer.id) {
								this.curuser = i
							}
						})
					}

				}
			},
			submit() {
				if (this.curuser != null) {
					this.$store.commit('setcustomer', this.userinfo)
					uni.navigateBack()
				} else {
					uni.$u.toast('请选择客户')
				}

			}
		},
		onShow() {

			this.getuserlist()
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.con {
		.header {
			padding: 20rpx 30rpx 26rpx;
		}
	}

	.box {
		height: calc(100vh - var(--status-bar-height) - 44px - 90rpx - 20rpx - 26rpx - 161rpx - 4px);
		padding: 0 30rpx;

		&__a {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 10rpx 0 0 30rpx;
			height: calc(100% - 10rpx - 20rpx);
		}

		&__top {
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 2rpx solid #F9F9F9;
			padding-right: 31rpx;
			justify-content: space-between;

			&__text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #6D6D6D;
				line-height: 26rpx;
			}

			&__m {
				width: 12rpx;
				height: 21rpx;
			}
		}

		&__title {
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #1E1E1E;
			line-height: 26rpx;
			padding: 30rpx 29rpx 20rpx 0;

			&__line {
				width: 5rpx;
				height: 24rpx;
				background: #3262FD;
				margin-right: 10rpx;
			}

		}

		&__item {
			height: 150rpx;
			display: flex;
			align-items: center;
			padding: 0 6rpx;

			&__chbox {
				width: 36rpx;
				height: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			&__check {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				border: 3rpx solid #B6B6B6;
			}

			&__checkicon {
				width: 36rpx;
				height: 36rpx;
			}

			&__name {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 27rpx;
				color: #181818;
				line-height: 26rpx;
			}

			&__addr {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #616161;
				line-height: 23rpx;
				opacity: 0.8;
				margin-top: 16rpx;
			}

			&__tx {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin: 0 24rpx 0 16rpx;
			}
		}
	}

	.scbox2 {
		height: calc(100% - 304rpx);
	}

	.footer {
		height: 161rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 35rpx 0 25rpx;
		justify-content: space-between;

		&__tx {
			width: 79rpx;
			height: 79rpx;
			border-radius: 50%;
		}

		&__name {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			line-height: 34rpx;
			margin-left: 17rpx;
		}
	}
</style>